<template>
	<div>
		<div style="margin-bottom: 10px;display: flex;">
			<el-button icon="el-icon-plus" type="danger" @click="dialogVisible = true">添加</el-button>
			<div style="display: flex;margin-left: 50px;">
				<el-input placeholder="请输入用户名" v-model="search.userName"></el-input>
				<el-input placeholder="请输入年龄" v-model="search.userAge"></el-input>
				<el-input placeholder="请输入性别" v-model="search.userSex"></el-input>
				<el-button icon="el-icon-search" type="danger" @click='getSearchPageData()'>搜索</el-button>
			</div>
		</div>
		<el-table highlight-current-row  border stripe :data="tableData"
			height="420" style="width: 100%">
			<el-table-column type="selection" label="行号" fixed="left">
			</el-table-column>
			<el-table-column prop="userId" label="用户ID" fixed="left">
			</el-table-column>
			<el-table-column prop="userName" label="姓名" fixed="left">
			</el-table-column>
			<el-table-column prop="userPwd" label="密码">
			</el-table-column>
			<el-table-column prop="userAge" label="年龄">
			</el-table-column>
			<el-table-column prop="userSex" label="性别">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="200">
			</el-table-column>
			<el-table-column prop="updateTime" label="更新时间" width="200">
			</el-table-column>


			<el-table-column label="操作" fixed="right" width="200">
				<template slot-scope="scope">
					<el-button icon="el-icon-edit" style="margin-left: 20px;" size="mini"
						@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button icon="el-icon-delete" size="mini" type="danger"
						@click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[4, 5, 6, 7]" :page-size="4" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog title="用户信息" :visible.sync="dialogVisible" width="30%">

			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
				<el-form-item prop="userName" label="用户名">
					<el-input v-model="ruleForm.userName" placeholder="请输入用户名">
					</el-input>
				</el-form-item>
				<el-form-item prop="userPwd" label="密码">
					<el-input v-model="ruleForm.userPwd" placeholder="请输入密码">
					</el-input>
				</el-form-item>
				<el-form-item prop="userAge" label="年龄">
					<el-input v-model="ruleForm.userAge" placeholder="请输入年龄">
					</el-input>
				</el-form-item>

				<el-form-item label="性别">
					<el-radio-group v-model="ruleForm.userSex">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sumitUserInfo('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios';
	const service = axios.create({
		baseURL: '/news' // api base_url
	})
	export default {
		data() {
			return {
				search:{
					userName: '',
					userAge: 0,
					userSex: ''
				},
				currentPage: 1,
				pageSize: 4,
				total: 200,
				tableData: [],
				dialogVisible: false,
				ruleForm: {
					userId: 0,
					userName: '',
					userPwd: '',
					userSex: '男',
					userAge: 0
				},
				rules: {
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							message: '用户名长度不能小于3',
							trigger: 'blur'
						}
					],
					userPwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 1,
							message: '密码不能为空',
							trigger: 'blur'
						}
					],
					userPwd: [{
						required: true,
						message: '请输入年龄',
						trigger: 'blur'
					}]
				}

			}
		},
		created() {
			this.getPageData();
		},
		methods: {
			
			clearFormData() {
				this.ruleForm.userId = 0;
				this.ruleForm.userName = '';
				this.ruleForm.userPwd = '';
				this.ruleForm.userSex = '男';
				this.ruleForm.userAge = 0;
			},
			addUser(formName) {
				
				let _that = this;
				//验证表单
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//alert("验证通过");
						//提交数据
						service({
							method: 'post',
							url: '/user/addUser.action',
							data: _that.ruleForm
						}).then(function(response) {
							if (response.data.code == 200) {
								//关闭模态框
								_that.dialogVisible = false;
								//重新刷新页面
								_that.getPageData();
							} else {
								alert(response.data.msg)
							}
						}).catch(function(error) {
							console.log(error);
						});

						_that.clearFormData();
					} else {
						//_that.clearFormData();
					}
				});
			},
			sumitUserInfo(formName) {
				if(this.ruleForm.userId > 0){
					this.updateUser(formName);
					
				}else{
					this.addUser(formName);
				}

			},
			updateUser(formName){
				let _that = this;
				//验证表单
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//alert("验证通过");
						//提交数据
						service({
							method: 'put',
							url: '/user/updateUser.action',
							data: _that.ruleForm
						}).then(function(response) {
							if (response.data.code == 200) {
								//关闭模态框
								_that.dialogVisible = false;
								//重新刷新页面
								_that.getPageData();
								_that.clearFormData();
								
							} else {
								alert(response.data.msg)
							}
						}).catch(function(error) {
							console.log(error);
						});
				
						
					} else {
						//_that.clearFormData();
					}
				});
			},
			getPageData() {
				let _that = this;
				service({
					method: 'get',
					url: '/user/selectByPage.action?page=' + _that.currentPage + '&limit=' + _that.pageSize
				}).then(function(response) {
					console.log(response);
					if (response.data.code == 200) {
						//console.log(response);
						_that.total = response.data.data.total;
						_that.tableData = response.data.data.data;
						console.log(response.data.data.data);
						console.log(response.data.data.count);
					} else {
						alert(response.data.msg)
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			clearSearch(){
				this.search.userAge = 0;
				this.search.userSex = '';
				this.search.userName = '';
			},
			getSearchPageData() {
				let _that = this;
				service({
					method: 'get',
					url: '/user/selectSearchByPage.action',
					// url: '/user/selectSearchByPage.action?page=' + _that.currentPage + '&limit=' + 
					// _that.pageSize+'&userName='+_that.search.userName+'&userSex='+_that.search.userSex+'&userAge='+_that.search.userAge
					params:{
						page: _that.currentPage,
						limit: _that.pageSize,
						userName: _that.search.userName,
						userSex: _that.search.userSex,
						userAge: _that.search.userAge
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.code == 200) {
						//console.log(response);
						_that.total = response.data.data.total;
						_that.tableData = response.data.data.data;
						console.log(response.data.data.data);
						console.log(response.data.data.count);
						_that.clearSearch();
					} else {
						alert(response.data.msg)
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			handleCurrentChange(currentRow, oldCurrentRow) {
				console.log(currentRow);
				console.log(oldCurrentRow);
			},
			handleEdit(index, row) {
				this.clearFormData();
				console.log("编辑第" + index + "行", row);
				this.ruleForm.userId = row.userId;
				this.ruleForm.userName = row.userName;
				this.ruleForm.userPwd = row.userPwd;
				this.ruleForm.userAge = row.userAge;
				this.ruleForm.userSex = row.userSex;
				this.dialogVisible = true;
				
			},
			handleDelete(index, row) {
				//console.log("删除第" + index + "行", row)
				let userId = row.userId;
				let _that = this;
				service({
					method: 'delete',
					url: '/user/deleteById.action/' + userId
				}).then(function(response) {
					if (response.data.code == 200) {
						_that.getPageData();
					} else {
						alert(response.data.msg)
					}
				}).catch(function(error) {
					console.log(error);
				});

			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize;
				this.getPageData();
				console.log(`每页 ${pageSize} 条`);
				//
			},
			handleCurrentChange(pageNumber) {
				this.currentPage = pageNumber;
				this.getPageData();
				console.log(`当前页: ${pageNumber}`);
			}
		}
	}
</script>
<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
